<script setup lang="ts">
import useUserStore from '@/store/mod/user.ts'
import { User,Lock } from '@element-plus/icons-vue'
import {ref, reactive, computed,watch} from "vue";
// 引入倒计时组件
import CountDown from "@/components/countdown/CountDown.vue";
import {ElMessage} from "element-plus";
import {reqWxLogin} from '@/api/user/user.ts'
import {WXLoginResponseData} from '@/api/user/type.ts'
import {useRoute, useRouter} from "vue-router";
const $router = useRouter()
const $route = useRoute()
let userStore = useUserStore()
let wxQrIsShow = ref(true)
/**
 * 切换微信登录，获取二维码
 */
async function changeWxQr(){
  wxQrIsShow.value=!wxQrIsShow.value
  //发请求获取微信二维码需要参数
  //咱们在向尚硅谷的服务器发请求，获取微信扫码登录页面参数
  //还需要携带一个参数：告诉尚硅谷服务器用户授权成功以后重定向项目某一个页面
  let redirect_URL = encodeURIComponent(window.location.origin+'/wxlogin')
  let res:WXLoginResponseData = await reqWxLogin(redirect_URL);
  console.log('微信登录 ',res)
  // 生成二维码的配置对象
  //@ts-ignore
   new WxLogin({
    self_redirect:true,//true：手机点击确认登录后可以在iframe内跳转到redirect_uri
    id: "login_container",//显示二维码容器设置（二维码想放到那个元素的id）
    appid: `${res.data.appid}`,//应用位置标识appid
    scope: "snsapi_login",//当前微信扫码登录页面已经授权啦
    redirect_uri: `${res.data.redirectUri}`,//填写授权回调域路径，就是用户授权成功以后，微信服务器向公司后台推送code地址
    state: `${res.data.state}`,//state就是学校服务器重定向的地址携带用户信息
    style: "black",//
   });
}
// 收集表单信息
// 存储手机号码
let loginParam =reactive({
  phone:'',
  code:''
})
let isPhone = computed(()=>{
  // 手机号码正则
  let regu = /^1[3-9][0-9]{9}$/
  return regu.test(loginParam.phone)
})
let sign=ref<number>(5)
let flag = ref<boolean>(false)
function getVerificationCode(){
  try{
    userStore.getCode(loginParam.phone)
    setTimeout(()=>{
      loginParam.code=userStore.code
    },1000)
    flag.value=true
    let id = setInterval(()=>{
      if(sign.value<=1){
        flag.value=false
        sign.value=6
        clearInterval(id)
      }
      sign.value--
    },1000)
  }catch (error){
    console.log(error)
  }
}
let form=ref(null)
async function login(){
   await form.value.validate()
  try{
    await userStore.userLogin(loginParam);
    userStore.visiable=false
    //获取url的路径
    let redirect  = $route.query.redirect
    if(redirect){
      await $router.push(redirect as string)
    }else {
      await $router.push('/home')
    }
  }catch (e){
    ElMessage({
      type:'error',
      message:(e as Error)
    })
  }
}
let rule={
  // phone:{required:true, trigger:'change', message:'手机号码必须是11位',min:11,max:11},
  // code:{required:true, trigger:'change', message:'验证码必须为6位',min:6,max:6}
  phone:[{trigger:'change',validator:validatorPhone}],
  code:[{trigger:'change',validator:validatorCode}]
}
/**
 * 手机号自定义校验
 * @param rule 表单校验规则对象
 * @param value 当前文本的内容
 * @param callBack 回调函数
 */
function validatorPhone(rule:any,value:any,callBack:any){
  let regu = /^1[3-9][0-9]{9}$/
  if(regu.test(value)){
    callBack()
  }else {
    callBack(new Error('手机号格式错误'))
  }
}
/**
 * 验证码的自定义校验
 * @param rule
 * @param value
 * @param callBack
 */
function validatorCode(rule:any,value:any,callBack:any){
  if(/^\d{6}/.test(value)){
    callBack()
  }else {
    callBack(new Error('验证码格式错误'))
  }
}

function close(){
  // console.log(form.value)
  Object.assign(loginParam,{phone:'',code:''})
  form.value.resetFields()
  userStore.visiable = false
}
// 监听场景的数据
watch(()=>wxQrIsShow.value,(val:boolean)=>{
  if(!val){
    userStore.queryState();
  }
})
</script>
<template>
<div class="login">
<!--  title：对话框左上角的标题-->
  <el-dialog
      v-model="userStore.visiable"
      title="用户登录"
      width="50%"
      @close="close"
  >
    <div class="content">
      <el-row>
        <el-col :span="12">
          <div v-show="wxQrIsShow" class="loginIn">
            <el-form
                status-icon
                :model="loginParam"
                :rules="rule"
                ref="form"
            >
              <el-form-item prop="phone">
                <el-input :prefix-icon="User" type="text"  placeholder="请输入手机号码" v-model="loginParam.phone"/>
              </el-form-item>
              <el-form-item prop="code">
                <el-input :prefix-icon="Lock"  type="text" placeholder="请输入手机验证码" v-model="loginParam.code"/>
              </el-form-item>
              <el-form-item>
                <el-button @click="getVerificationCode" :disabled="(!isPhone)||flag">
                  <div v-show="flag">获取验证码还需{{sign}}s</div>
                  <CountDown v-show="!flag"></CountDown>
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-button style="width: 100%;" type="primary" :disabled="!isPhone||loginParam.code.length<6" @click="login">用户登录</el-button>
              </el-form-item>
              <div class="wx" @click="changeWxQr">
                <p>微信扫码登录</p>
                <i>
                <svg t="1690944528682" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2359" width="32" height="32"><path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="2360"></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="2361"></path></svg>
                </i>
              </div>
            </el-form>
          </div>
          <div v-show="!wxQrIsShow" class="wxQr">
<!--            扫码登录的容器-->
            <div id="login_container"></div>
            <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
              <el-button @click="changeWxQr" style="width: 300px;margin-bottom: 10px;">返回使用电话号登录</el-button>
              <svg t="1693388361712" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4094" width="32" height="32"><path d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z" p-id="4095" fill="#d81e06"></path></svg>
            </div>

          </div>
        </el-col>
        <el-col :span="12">
          <div class="QR">
            <div class="t">
              <div class="l">
                <img src="@/assets/images/code_login_wechat.png" alt="">
                <svg t="1690945785016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2607" width="16" height="16"><path d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z" fill="#515151" p-id="2608"></path></svg>
                <p>微信扫一扫关注 <br>
                "快速预约挂号"
                </p>
              </div>
              <div class="r">
                <img src="@/assets/images/code_app.png" alt="">
                <svg t="1690945826412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3954" width="16" height="16"><path d="M341.333333 896H256V128h512v768H341.333333z m0-85.333333h341.333334V213.333333H341.333333v597.333334z m85.333334-42.666667v-85.333333h170.666666v85.333333h-170.666666z" fill="#515151" p-id="3955"></path></svg>
                <p>扫一扫下载 <br>
                  "预约挂号"APP
                </p>
              </div>
            </div>
            <div class="b">
              XXXXXX官方指定平台 <br>
              快速挂号 &nbsp; 安全放心
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button  @click="close">关闭窗口</el-button>
      </span>
    </template>
  </el-dialog>
</div>
</template>

<style scoped lang="scss">

.login{
  ::v-deep(.el-dialog__body){
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .loginIn{
    border: 1px solid #ccc;
    padding: 20px;
    .wx{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      align-items: center;
      p{
        margin-bottom: 5px;
      }
    }
  }
  .wxQr{
    font-size: 11px;
    display: flex;flex-direction: column;align-items: center;justify-content: center
  }
  .QR{
    display: flex;
    flex-direction: column;
    align-items: center;
    .t{
      display: flex;
      width: 100%;
      .l,.r{
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        img{
          width: 180px;
          height: 180px;
        }
      }
    }
    .b{
      margin-top: 10px;
      font-size: 20px;
      line-height: 1.8em;
    }
  }
}
</style>